<template>
	<view class="order-detail-container">
		<view class="top-title-return">
			<view class="return-icon" @click="returnBack">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="order-detail-title">
				订单详情
			</view>
			<view class="contact-customer-service" @click="toCustomerChat">
				<uni-icons type="headphones" size="26"></uni-icons>
			</view>
		</view>
		<view class="order-detail-content">
			<view class="order-address">
				<view class="order-username">
					<text class="order-username-text">{{order.orderAddress.username}}</text>
					<text class="order-phone">{{order.orderAddress.phone}}</text>
				</view>
				<view class="order-address-detail">
					{{order.orderAddress.province}}&nbsp;
					{{order.orderAddress.city}}&nbsp;
					{{order.orderAddress.county}}&nbsp;
					{{order.orderAddress.detailAddress}}
				</view>
			</view>
			<view class="order-goods">
				<view class="order-goods-item" v-for="item in order.goods" :key="item.goodsAid" @click="goodDetail(item)">
					<view class="goods-image">
						<image :src="item.goodsImg" mode="aspectFill"></image>
					</view>
					<view class="goods-info">
						<view class="goods-info-top">
							<view class="name-count">
								<view class="goods-name">
									{{item.goodsName}}
								</view>
								<view class="goods-num">
									X{{item.count}}
								</view>
							</view>
							<view class="good-style">
								{{item.goodsStyle}}
							</view>
						</view>
						<view class="goods-price">
							{{item.price}}
						</view>
					</view>
				</view>
			</view>
			<view class="order-price">
				<view class="order-amount-title">
					订单金额
				</view>
				<view class="goods-all-price">
					<view class="goods-all-price-title">
						商品总额
					</view>
					<view class="goods-all-price-value">
						{{order.allPrice}}
					</view>
				</view>
				<view class="goods-all-price">
					<view class="goods-all-price-title">
						运费
					</view>
					<view class="goods-all-price-value">
						{{order.shippingFee}}
					</view>
				</view>
				<view class="goods-all-price">
					<view class="goods-all-price-title">
						已用积分
					</view>
					<view class="goods-all-price-value">
						{{order.record}}
					</view>
				</view>
			</view>
			<divider-line :width="100"></divider-line>
			<view class="actual-amount">
				<view class="actual-amount-text">
					应付金额
				</view>
				<view class="actual-amount-value">
					{{order.payAmount}}
				</view>
			</view>
			<view class="order-info">
				<view class="order-info-title">
					订单信息
				</view>
				<view class="order-no">
					<view class="order-no-title">
						订单号
					</view>
					<view class="order-no-value-copy">
						<view class="order-no-value">
							{{order.orderInfo.orderNo}}
						</view>
						<view class="order-no-copy">
							复制
						</view>
					</view>
				</view>
				<view class="order-no">
					<view class="order-no-title">
						下单时间
					</view>
					<view class="order-no-value-copy">
						{{order.orderInfo.orderTime}}
					</view>
				</view>
				<view class="order-no">
					<view class="order-no-title">
						订单状态
					</view>
					<view class="order-no-value-copy">
						{{order.orderInfo.orderState}}
					</view>
				</view>
			</view>
		</view>
		<view class="order-bottom">
			<view class="opera-btn">
				<button>再来一单</button>
			</view>
		</view>
	</view>
</template>

<script>
	import DividerLine from '../../components/common-components/DividerLine.vue';
	export default {
		components: {
			DividerLine
		},
		data() {
			return {
				order: {
					orderAddress: {
						username: '范占国',
						phone: '183****8391',
						province: '浙江省',
						city: '金华市',
						county: '永康市',
						detailAddress: '前仓镇金鸡路170号'
					},
					goods: [{
							goodsAid: 1,
							goodsImg: 'https://img2.baidu.com/it/u=3704442956,2984884679&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332',
							goodsName: '云感长款羽绒服',
							goodsStyle: '宽松版型 燕麦浅灰 2XL',
							count: 2,
							price: '￥856'
						},
						{
							goodsAid: 2,
							goodsImg: 'http://t15.baidu.com/it/u=134744772,1031494600&fm=224&app=112&f=JPEG?w=500&h=500',
							goodsName: '时尚街头字母刺绣鸭舌帽',
							goodsStyle: '牛仔深蓝',
							count: 1,
							price: '￥33'
						}
					],
					allPrice: '￥889.0',
					shippingFee: '已免运费',
					record: 0,
					payAmount: '￥889.0',
					orderInfo: {
						orderNo: 'JY2234338437845',
						orderTime: '2024-12-21 12:30',
						orderState: '已取消'
					}
				}
			};
		},
		methods: {
			returnBack() {
				uni.navigateBack()
			},
			toCustomerChat() {
				uni.navigateTo({
					url: '/pages/friendsChat/chatPage/chatRoomPage'
				})
			},
			goodDetail(item){
				uni.navigateTo({
					url: `/pages/tabBar/extUI/shopping_topBar/goodDetail?goodAid=${item.goodsAid}`
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.order-detail-container {
		.top-title-return {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			height: 100rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			z-index: 2;

			.order-detail-title {
				margin-top: 60rpx;
				font-size: 35rpx;
				letter-spacing: 2px;
				font-weight: bold;
			}

			.return-icon {
				margin-top: 60rpx;
				margin-left: 30rpx;
			}

			.contact-customer-service {
				margin-top: 60rpx;
				margin-right: 30rpx;
			}
		}

		.order-detail-content {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 180rpx;
			margin-bottom: 180rpx;

			.order-address {
				.order-username {
					font-size: 30rpx;

					.order-username-text {
						letter-spacing: 3px;
						margin-right: 10rpx;
					}

					.order-phone {
						letter-spacing: 1rpx;
					}
				}

				.order-address-detail {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #6d6d6d;
				}
			}

			.order-goods {
				width: 100%;
				margin-top: 60rpx;

				.order-goods-item {
					width: 100%;
					display: flex;
					margin-bottom: 30rpx;

					.goods-image {
						width: 25%;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
						}
					}

					.goods-info {
						width: 75%;
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.goods-info-top {

							.name-count {
								display: flex;
								justify-content: space-between;

								.goods-name {
									font-size: 30rpx;
									letter-spacing: 1px;
								}

								.goods-num {
									font-size: 30rpx;
									letter-spacing: 1px;
								}
							}

							.good-style {
								margin-top: 10rpx;
								font-size: 26rpx;
								color: #6d6d6d;
							}
						}

						.goods-price {
							font-size: 32rpx;
						}
					}
				}
			}

			.order-price {
				margin-top: 60rpx;

				.order-amount-title {
					font-size: 40rpx;
				}

				.goods-all-price {
					font-size: 32rpx;
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;

					.goods-all-price-title {}

					.goods-all-price-value {}
				}
			}

			.actual-amount {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
			}

			.order-info {
				margin-top: 60rpx;

				.order-info-title {
					font-size: 40rpx;
				}

				.order-no {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					.order-no-title {
						
					}

					.order-no-value-copy {
						display: flex;
						
						.order-no-value {
							
						}
						.order-no-copy{
							margin-left: 15rpx;
						}
					}


				}
			}
		}
		
		.order-bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 130rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			
			.opera-btn{
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				align-items: center;
				
				button{
					width: 100%;
					border-radius: 40rpx;
					font-size: 33rpx;
					letter-spacing: 3px;
					background-color: #66596b;
					color: #fff;
				}
			}
		}
	}
</style>